<template>
  <div id="category">
    <nav-bar class="category-nav">
      <div slot="left">
        <!-- <router-link to="/">
            <img src="~assets/img/category/left.svg" alt="">
        </router-link> -->
        <!-- <a href="/supermall/home">
          
        </a> -->
      </div>
      <div slot="center">FangMall</div>
    </nav-bar>
    
    <div class="cate-list">
      <category-list :title="['手机','电脑','手办','模型','家具','灯具']"
      @tabClick="tabClick"
      class="cate"
      ></category-list>
      <goods-list :goods="showGood" class="good-list"></goods-list>
    </div>
    <back-top></back-top>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar.vue';
import CategoryList from 'components/content/category/CategoryList';
import GoodsList from 'components/content/goods/GoodsList';
import BackTop from 'components/content/backTop/BackTop';
// import Scroll from 'components/common/scroll/Scroll';


import { getHomeGoods } from 'network/home.js';


export default {
    name: 'Category',
    components: {
      NavBar,
      CategoryList,
      GoodsList,
      BackTop,
      // Scroll,
    },
    data() {
       return {
          goods: {
            'pop': {page: 0,list:[]},
            'new': {page: 0,list:[]},
            'sell': {page: 0,list:[]},
          },
          // 定义type用来存储点击到的类型 默认值pop
          currentType: 'pop'
        }
    },
    computed: {
        showGood() {
          return this.goods[this.currentType].list
        }
      },
    created() {
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
    },
    methods: {
      tabClick(index) {
          switch(index) {
            case 0:
              this.currentType = 'pop'
              break
            case 1:
              this.currentType = 'new'
              break
            case 2:
              this.currentType = 'sell'
              break
          }
        },
      getHomeGoods(type) {
        const page = this.goods[type].page + 1
        getHomeGoods(type,page).then(res => {
          // console.log(res);
          // 不能这样使用 新的数组添加会覆盖之前添加的
          // this.goods.pop.list = res.data.list
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page += 1
        })
      }
    }
}
</script>

<style scoped>
#category{
    padding-top: 44px;
    height: 3000px;
  }

  .category-nav {
    /* background-color: var(--color-tint); */
    background-color: lightblue;
    color: #fff;

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
  .category-nav img {
    /* position:absolute; */
    margin-top: 8px;
    margin-left: -15px;
    width: 30px;
    height: 30px;
  }
  .cate-list {
    display: flex;
    position: relative;
  }
  .cate {
    position: absolute;
    height: 100%;
  }
  .good-list {
    /* position: absolute; */
    margin-left: 90px;
    width: 50%;
    flex: 1;
    margin-right: 5px;
  }
</style>
